<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        .container{
            width: 800px;
            margin: 10px auto;
        }
        
        .container h2{
            text-align: center;
            margin: 30px 0px;
        }

        .row {
            height: 50px;
            display: flex;
            justify-content: center;
            margin-top: 5px;
            line-height: 10px;
            
        }

        .row span{
            height: 50px;
            width: 100px;
            line-height: 50px;
        }

        .row input{
            height: 50px;
            width: 300px;
            line-height: 50px;
           
        }

        .row button{
            width: 400px;
            height: 50px;
            color: white;
            background-color: orange;
            border: none;
            border-radius: 10px;
        }

        .row button:active{
            background-color: gray;
        }
    </style>
</head>
<body>
    <!--这是一个顶层容器 存放其他元素-->
    <div class = "container" id = "tmp">
        <h2>表白墙</h2>
        <div class="row">
            <span>谁</span>
            <input type="text" id="from">
        </div>

        <div class="row">
            <span>对谁</span>
            <input type="text" id="to">
        </div>

        <div class="row">
            <span>说什么</span>
            <input type="text" id="message">
        </div>
        
        <div class="row">
            <button>提交</button>
        </div>
        
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script>
        let container = document.querySelector('.container');
        let fromInput = document.querySelector('#from');
        let toInput = document.querySelector('#to');
        let messageInput = document.querySelector('#message');
        let button = document.querySelector('button');
        button.onclick = function(){
            //1.把用户输入的内容获取到
            let from = fromInput.value;
            let to = toInput.value;
            let message = messageInput.value;
            if(from == '' || to == '' || message == ''){
                return;
            }
            //2.构造一个 div，把这个 div 插入到 .container 的末尾
            let newDiv = document.createElement('div');
            newDiv.className = 'row';
            newDiv.innerHTML = from + "对" + to + "说" + message;
            //3.把 div 挂在 container 里面
            container.appendChild(newDiv);
            //4.把之前输入框内容进行清空
            fromInput.value = '';
            toInput.value = '';
            messageInput.value = '';
            //[新增] 给服务器发起 post 请求，把上述数据提交到服务器这边
            let body = {
                "from": from,
                "to": to,
                "message": msg
            };
            strBody = JSON.stringify(body);
            console.log("strBody: " + strBody);
            $.ajax({
                type: 'post',
                url: 'message',
                data: strBody,
                contentType: "application/json; charset=utf8",
                success: function(body) {
                    console.log("数据发布成功");
                }
            });
        }

        // [新增] 在页面加载的时候，发送 GET 请求，从服务器获取数据并添加到页面中
        $.ajax({
            type: 'get',
            url: 'message',
            success: function(body) {
                // 此处拿到的 body 就是一个 js 的对象数组了
                // 本来服务器返回的是一个 json 格式的字符串，但是 jquery 的 ajax 能够自动识别
                // 自动帮我们把 json_字符串转成 js 对象数组
                // 接下来遍历这个数组，把元素取出来，构造到页面中即可
                let s = document.getElementById("tmp")
                for (let message of body) {
                    // 针对每个元素构造一个div
                    let newDiv = document.createElement('div');
                    newDiv.className = 'row';
                    newDiv.innerHTML = message.from + "对" + message.to + "说" + message.message;
                    s.appendChild(newDiv)
                }
            }
        });
    </script>
</body>
</html>